<!--

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.

-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kogito Serverless Workflow Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/>
    <!-- Load AngularJS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module("CountriesManagement", []);

      //Controller Part
      app.controller("CountriesManagementController", function ($scope, $http) {

        //Initialize page with default data which is blank in this example
        $scope.countries = [];

        $scope.form = {
          name: ""
        };

        //Now load the data from server
        _refreshPageData();

        //HTTP POST methods for add countries
        $scope.add = function () {
          var workflowdata = { "name": $scope.form.name};

          //alert("data: " + JSON.stringify(data));

          $http({
            method: "POST",
            url: '/jsonservicecall',
            data: workflowdata,
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            }
          }).then(_success, _error);
        };

        /* Private Methods */
        //HTTP GET- get all countries collection
        function _refreshPageData() {
          $http({
            method: 'GET',
            url: '/countryclassifier'
          }).then(function successCallback(response) {
            $scope.countries = response.data;
          }, function errorCallback(response) {
            console.log(response.statusText);
          });
        }

        function _success(response) {
          _refreshPageData();
          _clearForm();
        }

        function _error(response) {
          alert(response.data.message || response.statusText);
        }

        //Clear the form
        function _clearForm() {
          $scope.form.name = "";
        }
      });
    </script>
</head>
<body ng-app="CountriesManagement" ng-controller="CountriesManagementController">

<div class="container">
    <h1>Serverless Workflow - Countries</h1>

    <h3>Enter a country name</h3>
    <form ng-submit="add()">
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Name" ng-model="form.name" size="60"/></div>
        </div>
        <input type="submit" value="Classify"/>
    </form>

    <h3>Country Information</h3>
    <table style="width:100%">
        <tr>
            <th align="left"><b>Name</b></th>
            <th align="left"><b>Capital</b></th>
            <th align="left"><b>Region</b></th>
            <th align="left"><b>Population</b></th>
            <th align="left"><b>Population Classification</b></th>
        </tr>
        <tr ng-repeat="country in countries">
            <td>{{ country.name }}</td>
            <td>{{ country.capital }}</td>
            <td>{{ country.region }}</td>
            <td>{{ country.population }}</td>
            <td>{{ country.classifier }}</td>
        </tr>
    </table>
</div>

</body>
</html>
